<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="top.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script>
<style type="text/css">
span{width: 100px;display: block;font-size: 15px;margin-bottom: 5px;font-weight: bolder;}
p.message{height: 10px;color: red;}
form{width: 429px;height: 327px;position: fixed;left: 50%;top:50%;background: #C4D3F6;border-radius: 2%;
    transform: translate(-50%, -50%);padding: 21px 43px;}
input,select{  
	background:none;border-width: 0 0 2px 0;  
	outline:none;  
	border-bottom:2px solid white;
	width: 100%;
    height: 20px;
    font-size: 15px;
}
input:focus{   
	border-bottom: 2px solid pink;
}
p.message{margin: 2px 0 6px 0;font-size: 13px;}
a.submit{display: block;border: 1px solid aliceblue;margin: 4px 0;padding: 5px;width: 86px;
border-radius: 6%;text-align: center;cursor: pointer;}
</style>
</head>
<body>
<!-- 避免内容被吸顶灯效果遮住 -->
<div class="empty" style="margin-top:50px;"></div>

<h2>${user.username } 的个人信息</h2>
<hr>
<form name="updateform" autocomplete="off">
	<p><span>账号</span><input value="${user.uid}" name="uid" id="uid" readonly="readonly"></p>
	<p class="message"></p>
	
	<p><span>昵称</span><input type="text" value="${user.username }" name="username" id="username"></p>
	<p class="message"></p>
	
	<p>
		<span>性别</span>
		<select name="sex" id="sex" value="${user.sex }">
			<option value="男">男</option>
			<option value="女">女</option>
		</select>
	</p>
	
	<p><span>地址</span><input type="text" name="addr" id="addr" value="${user.addr }" required="required"></p>
	<p class="message"></p>
	
	<p><span>联系方式</span><input type="text" name="phone" id="phone" value="${user.phone }"></p>
	<p class="message"></p>
	
	<a class="submit">修改</a>
</form>

<script type="text/javascript">
$(document).ready(function() {
   $("#username").blur(function(){
       checkUname();
    });
   $('#addr').blur(function(){
	   checkAddr();
   });
   $('#phone').blur(function(){
	   checkPhone();
   });
	
   /* 点击链接的时候 */
    $('a.submit').bind('click',  function(event) {
        var uid = $('#uid').val();
        var username = $('#username').val();
        var sex = $('#sex').val();
        var addr = $('#addr').val();
        var phone = $('#phone').val();
		if(checkUname()&&checkAddr()&&checkPhone()){
			// 获得上述信息后封装一个对象
	        var user = {'uid':uid,'username':username,'sex':sex,'addr':addr,'phone':phone};
	        updateUser(user);
		}else{
			alert('请检查输入信息的格式！');
		}
        
    });
});

/* 验证用户的昵称 */
   function checkUname() {
	
       var uname = $('#username').val();
       var nameReg =  /^[a-zA-Z0-9\u4e00-\u9fa5]{2,20}$/g;  //定义约束,2-20位中文或者字母的混合
       if (!nameReg.test(uname)) {   //判断
           $('#username').parent().next().html("昵称位2-20位中文或者字母的混合");
           return false;
       }
       else {
    	   $('#username').parent().next().html("格式正确");
    	   $('#username').parent().next().css('color','green');
           return true;
       }
   }
   function checkAddr() {
		
       var addr = $('#addr').val();
       var addrReg =  /^[\u4e00-\u9fa5]{8,}$/;  //定义约束,地址应不少于8个汉字
       if (!addrReg.test(addr)) {   //判断
           $('#addr').parent().next().html("地址应不少于8个汉字");
           return false;
       }
       else {
    	   $('#addr').parent().next().html("格式正确");
    	   $('#addr').parent().next().css('color','green');
           return true;
       }
   }
 /*   验证电话号码 */
   function checkPhone() {
		
       var phone = $('#phone').val();
       var phoneReg =  /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/;
       if (!phoneReg.test(phone)) {   //判断
           $('#phone').parent().next().html("电话号码格式不正确");
           return false;
       }
       else {
    	   $('#phone').parent().next().html("格式正确");
    	   $('#phone').parent().next().css('color','green');
           return true;
       }
   }


















function updateUser(user){
    $.ajax({
        url: 'updateUser.do',
        type: 'POST',
        dataType:'json',
        contentType : "application/json",
        data: JSON.stringify(user)
    })
    .done(function() {
        console.log("success");
        alert('修改成功!');
    })
    .fail(function() {
        console.log("error");
    })
    .always(function() {
        console.log("complete");
    });

}


</script>
</body>
</html>